<template>
	<view class="wallet-content">
		<view class="wallet">
			<view class="l-whitespace">
				<view class="wallet-infos">
					<view class="iconfont iconico" @click="goCollection"></view>
					<view class="wallet-infos-mod">
						<view class="uim-avatar">
							<image v-if="userInfo.head" :src="userInfo.head" mode="aspectFill"></image>
							<image v-else src="../../static/touxiang.png" mode="aspectFill"></image>
						</view>
						<view class="uim-text">
							<view class="uim-text-name-wrap">
								<text class="uim-text-name">{{userInfo.name || userInfo.tel}}-Wallet</text>
							</view>
							<view class="uimCode" @click="onClipboard">
								{{code}}
								<view class="iconfont iconqiehuan"></view>
							</view>
						</view>
					</view>
					<view class="wallet-money">
						<view class="wallet-money-l" @tap="onRecharge">
							<!-- <view class="wallet-money-recharge">
								<view class="iconfont iconchongzhi2"></view>
								<view>充值</view>
							</view> -->
							<view class="wallet-money-transfer" @tap="goTransfer('')">
								<view class="iconfont iconzhuanzhang"></view>
								<view>转账</view>
							</view>
						</view>
						<view class="wallet-money-r">
							<view class="sum">
								<view class="unit">$</view>
								{{walletTotal}}
							</view>
							<view class="txt">
								总资产≈(￥{{walletTotalRMB}})
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="wallet-title">
				<view class="title color1">资产</view>
				<view class="wallet-integral color2" @tap="goTransferIntegral">
					<view class="iconfont iconzhuanhuan"></view>
					<view>兑换</view>
				</view>
			</view>
				<scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
                @scroll="scroll">
				<view class="wallet-property l-whitespace">
                   <block v-for="(item, index) in wallet" :key="index">
						<view class="wpl-item van-hairline--bottom" 
						v-if="item.name"
						hover-class="item-hover" 
						@click="goDetails(item)">
							<view class="wpl-item-name">
							   <view slot="icon" class="avatar">
								   <image class="img" src="../../static/ethereum.png"></image>
							   </view>
							   <view slot="title" class="name">{{item.name}}</view>
							</view>
							<view slot="right-icon" class="wpl-item-sum">
								<view class="sum">{{item.value}}</view>
								<view class="price">≈ $ {{item.price}}USTD</view>
							</view>
						</view>
                   </block>
				   </view>
                </scroll-view>
		</view>
	</view>
</template>

<script>
import img from '../../static/ethereum.png'
import { mapActions, mapGetters } from 'vuex';
export default {
	data() {
		return {
			img: img,
			code: '',
			wallet: [],
			walletTotal: 0
		};
	},
	onLoad() {
	},
	onShow () {
		uni.showLoading({title: ''})
		this.code = this.userInfo.addr
		this.getWallet()
	},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo',
			walletInfo: 'getWalletInfo'
		}),
		walletTotalRMB () {
			return parseFloat(this.walletTotal * 6.8).toFixed(2)
		}
	},
	methods: {
		...mapActions([
			'setWalletInfo'
		]),
		onClipboard () {
			uni.setClipboardData({
				data: this.code,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'none',
						duration: 2000
					})
				}
			});
		},
		getWallet () {
			if (!this.userInfo.addr) return
			this.$http.getWallet({addr: this.userInfo.addr}).then(e => {
				const data = e.data.date
				if (data) {
					this.setWalletInfo(data)
					const value = Object.values(data)
					let Total = 0
					this.wallet = []
					Object.keys(data).forEach((e, index) => {
						Total+= Number(this.walletPrice(value[index], e))
						this.wallet.push({
							name: this.walletName(e),
							price: this.walletPrice(value[index], e),
							value: value[index],
						})
					})
					this.walletTotal = parseFloat(data.tk*0.01 + data.seed*0.1).toFixed(2)
				}
				uni.hideLoading()
			})
		},
		walletPrice (value, name) {
			switch(name){
				case 'seed':
					return parseFloat(value * 0.1).toFixed(2)
				case 'tk':
					return parseFloat(value * 0.01).toFixed(2)
				default:
				return 0
			}
		},
		walletName (name) {
			switch(name){
				case 'seed':
					return 'LAB'
				case 'tk':
					return 'LABtk'
				default:
			}
		},
		goDetails (key) {
			uni.navigateTo({
				url: `/pages/wallet/details/${key.name}/index`
			});
		},
		goCollection () {
			uni.navigateTo({
				url: '/pages/wallet/collection/index'
			});
		},
		goTransfer (code) {
			uni.navigateTo({
				url: '/pages/wallet/transfer/index?code=' + code
			});
		},
		goTransferIntegral (code) {
			uni.navigateTo({
				url: '/pages/wallet/transfer/internal'
			});
		},
		onRecharge () {
			uni.navigateTo({
				url: '/pages/wallet/recharge/index'
			});
		}
	},
	onNavigationBarButtonTap(e) {
		uni.scanCode({
			success: res => {
				if (res.result) {
					this.goTransfer(res.result)
				} else {
					uni.showToast({
						title: '未识别到钱包地址',
						icon: 'none',
						duration: 2000
					});
				}
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
			}
		});
	},
};
</script>

<style scoped lang="scss">
	image{
		width: 100%;
		height: 100%;
	}
.wallet {
	height: 100vh;
	overflow: hidden;
	position: relative;
// 	margin-bottom: 30upx;
// 	margin-top: 30upx;
	background-color: #fff;
	&-infos {
		position: relative;
		margin-top: 30upx;
		padding: 30upx 16upx;
		background: #F4544D;
		box-shadow: 0 8upx 20upx 0 rgba(216,0,42, .5);
		border-radius: 10upx;
		.iconico {
			position: absolute;
			right: 15px;
			top: 15px;
			font-size: 42upx;
			color: #fff;
		}
		&-mod {
			display: flex;
			align-items: center;
			.uim {
				&-avatar {
					width: 100upx;
					height: 100upx;
					margin-right: 12upx;
					border-radius: 100%;
					overflow: hidden;
				}
				&-text {
					&-name-wrap {
						display: flex;
						align-items: center;
						width: 480upx;
						.icon-shimingrenzheng {
							margin-left: 10upx;
							font-size: 34upx;
							color: #FDECEC;
						}
					}
					&-name {
						display: block;
						font-size: 34upx;
						color: #FDECEC;
					}
					.uimCode {
						display: block;
						margin-top: 5upx;
						font-size: 24upx;
						color: #fbd2d2;
						.iconqiehuan {
							font-size: 26upx;
							margin-left: 10upx;
							color: #e8c0c0 ;
						}
					}
				}
			}
		}
		&-list {
			display: flex;
			align-items: center;
			margin-top: 30upx;
			color: #90c1fe;
			.uil {
				&-item {
					margin-right: 60upx;
					text-align: center;
					font-size: 24upx;
					.iconfont {
						font-size: 44upx;
						margin-bottom: 10upx;
					}
					text {
						display: block;
					}
					.icon-shoukuanma- {
						color: #fff
					}
					.icon-renmai {
						color: #32b9b5
					}
					.icon-yaoqing {
						color: #c2390d
					}
					.icon-jiaoyijilu {
						color: #21d1a0
					}
				}
			}
		}
	} 
	
	&-money {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		&-recharge,
		&-transfer{
			padding-right: 60upx;
			text-align: center;
		}
		&-l {
			display: flex;
			margin: 50upx 0 0 10upx;
			color: #fff;
		}
		&-r {
			display: flex;
			justify-content: flex-end;
			flex-wrap: wrap;
			padding-top: 20upx;
		}
		.sum {
			position: relative;
			font-size: 46upx;
			font-weight: 600;
			color: #fff;
			.unit {
				position: absolute;
				left: -30upx;
				top: 2upx;
				font-size: 32upx;
			}
		}
		.txt {
			margin-top: 10upx;
			width: 100%;
			color: #fff;
			text-align: right;
		}
	}
	
	.scroll-Y {
		height: calc(100vh - 410upx)
	}
	&-integral {
		display: flex;
		align-items: center;
		.iconzhuanhuan {margin-right: 5upx; line-height: 1;}
	}
	&-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30upx;
		padding: 20upx 40upx;
		// background-color: #fff;
		box-shadow: 0 5upx 15upx 0 rgba(0, 0, 0, 0.1);
		.title {
			font-weight: 500;
			font-size: 38upx;	
		}
		.iconfont {
			font-size: 40upx;
		}
	}
	&-property {
		padding: 0upx 0 20upx 0;
		background-color: #f8f8f8;
		&-tetile {
		}
		.wpl-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30upx 20upx;
			// background-color: #fff;
			&-name {
				display: flex;
				align-items: center;
				.name {
					font-size: 32upx;
					font-weight: 500;
				}
				.avatar {
					display: flex;
					align-items: center;
					justify-content: space-between;
					text-align: center;
					width: 70upx;
					height: 70upx;
					margin-right: 15upx;
					border: 1px solid #e0e0e0;
					border-radius: 100%;
					overflow: hidden;
					.img {
						width: 60%;
						height: 60%;
						margin: auto;
					}
				}
			}
			&-sum {
				text-align: right;
				.sum {
					font-size: 36upx;
				}
				.price {
					font-size: 24upx;
					color: #9b9b9b;
				}
			}
		}
		
	}
}
</style>
